import React from 'react'
import PropTypes from 'prop-types'
import {Button, Col, Form, message, Modal, Row, Input, Select} from 'antd'
import MemberList from "./MemberList"

const {Search} = Input
const {Option} = Select

const modal = ({
                 onOk,
                 filter,
                 onFilterChange,
                 modalMemberListProps,
                 form: {
                   getFieldDecorator,
                   getFieldsValue,
                 },
                 ...modalProps
               }) => {

  const valid = fields => {
    const {type, keyword} = fields

    if (!type && keyword) {
      message.warn("请选择查询类型")
      return false
    }

    return true
  }

  const handleSubmit = () => {
    let fields = getFieldsValue()
    if (!valid(fields)) {
      return
    }
    onFilterChange(fields)
  }

  const ColProps = {
    xs: 24,
    sm: 12,
    style: {
      marginBottom: 16,
    },
  }

  const TwoColProps = {
    ...ColProps,
    xl: 96,
  }

  const modalOpts = {
    ...modalProps,
    onOk,
  }

  const {type, keyword} = filter

  const prefixSelector = getFieldDecorator('type', {initialValue: type})(<Select placeholder="请选择" allowClear={true}
                                                                                 style={{width: 100}}>
    <Option value="LOGINUSER">登陆账户</Option>
    <Option value="REALNAME">员工姓名</Option>
    <Option value="PHONENUM">手机号码</Option>
    <Option value="DEPARTMENT">所属部门</Option>
    <Option value="ROLE">角色</Option>
  </Select>)

  return (
    <Modal {...modalOpts}>
      <Row gutter={24}>
        <Col {...ColProps} xl={{span: 8}} md={{span: 8}}>
          {getFieldDecorator('keyword', {initialValue: keyword})(
            <Search addonBefore={prefixSelector}
                    style={{width: '100%'}}
                    placeholder="请输入"
                    onSearch={handleSubmit}
            />,
          )}
        </Col>
        <Col {...TwoColProps} xl={{span: 4}} md={{span: 24}} sm={{span: 24}}>
          <div style={{display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap'}}>
            <div>
              <Button type="primary" className="margin-right" onClick={handleSubmit}>查询</Button>
            </div>
          </div>
        </Col>
      </Row>
      <MemberList {...modalMemberListProps}/>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func,
}

export default Form.create()(modal)
